<link rel="stylesheet" type="text/css" href="<?php echo Yii::app ()->request->baseUrl; ?>/css/menu/gallery.css" />
<!--[if lte IE 7]>
<style type="text/css">
ul li{
	display:inline;
	/*float:left;*/
}
</style>
<![endif]-->

<div id="main">


  <div id="gallery">
	
    <div id="slides">
    
    <div class="slide">

    	<div>
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	</div>
		<div>
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	</div>
		<div>
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	</div>
		<div>
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/macbook.jpg" width="230" height="100" alt="side" />
    	</div>
    </div>
    <div class="slide">

		<div>
		<?php
		$gGeo=null;
		if($goGeo){
			$i=0;
			foreach ($goGeo as $g){
				if($i%4==0){
		?>
		</div><div>
		<?php
					
				}
				
				
		?>	
	<script> 

		$("<?php echo '#'.$g->goodsName?>").click(function(event){
			quoteMesh(<?php echo json_encode($g)?>,event);
			$.fancybox.close();
      //$('.dock').html('');
	  	});
	  
	</script>			
    	<img class='geometry' id="<?php echo $g->goodsName ?>" src="<?php echo $g->thumbPath?>" width="230" height="100" alt="<?php echo $g->geometry?>" />

    	<?php $i++;}}?>
    	</div>

    </div>
    <div class="slide">
    	<img class='geometry'src="thumbs/imac.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/imac.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/imac.jpg" width="230" height="100" alt="side" />
    	<img class='geometry'src="thumbs/imac.jpg" width="230" height="100" alt="side" />
    </div>
    <div class="slide">
		<img class='geometry'src="thumbs/info.jpg" width="230" height="100" alt="side" />
		<img class='geometry'src="thumbs/info.jpg" width="230" height="100" alt="side" />
		<img class='geometry'src="thumbs/info.jpg" width="230" height="100" alt="side" />
		<img class='geometry'src="thumbs/info.jpg" width="230" height="100" alt="side" />
	</div>
      
    </div>
    
    <div id="menu">
    
    <ul>
    	<br>
        <li class="fbar">&nbsp;</li>
		<li class="menuItem"><a href=""><img src="thumbs/thumb_macbook.png" alt="thumbnail" /></a></li>
		<li class="menuItem"><a href=""><img src="thumbs/thumb_iphone.png" alt="thumbnail" /></a></li>
		<li class="menuItem"><a href=""><img src="thumbs/thumb_imac.png" alt="thumbnail" /></a></li>
		<li class="menuItem"><a href=""><img src="thumbs/thumb_about.png" alt="thumbnail" /></a></li>
    </ul>
    
    
    </div>
    
  </div>
    
</div>
<script type="text/javascript">
	$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth +=920;
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		// if(!$('#slides .slide img').width())
		// {
			// alert("Please, fill in width & height for all your images!");
			// return false;
		// }
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 10;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);


	
});
</script>